<template>
  <div class="pagination-wrapper" v-if="total > 0">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="custom-pagination"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'

// Props
const props = defineProps({
  total: {
    type: Number,
    default: 0
  },
  page: {
    type: Number,
    default: 1
  },
  limit: {
    type: Number,
    default: 20
  }
})

// Emits
const emit = defineEmits(['page-change', 'size-change'])

// 计算属性
const currentPage = computed({
  get: () => props.page,
  set: (value) => emit('page-change', value)
})

const pageSize = computed({
  get: () => props.limit,
  set: (value) => emit('size-change', value)
})

// 处理页码变化
const handleCurrentChange = (page) => {
  emit('page-change', page)
}

// 处理每页数量变化
const handleSizeChange = (size) => {
  emit('size-change', size)
}
</script>

<style scoped>
.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin: 30px 0;
  padding: 20px;
}

.custom-pagination {
  background: white;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.custom-pagination :deep(.el-pagination__total) {
  color: #666;
  font-weight: 500;
}

.custom-pagination :deep(.el-pager li) {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  margin: 0 2px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.custom-pagination :deep(.el-pager li:hover) {
  background-color: #e3f2fd;
  border-color: #2196f3;
}

.custom-pagination :deep(.el-pager li.is-active) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  color: white;
}

.custom-pagination :deep(.btn-prev),
.custom-pagination :deep(.btn-next) {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.custom-pagination :deep(.btn-prev:hover),
.custom-pagination :deep(.btn-next:hover) {
  background-color: #e3f2fd;
  border-color: #2196f3;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .pagination-wrapper {
    margin: 20px 0;
    padding: 10px;
  }
  
  .custom-pagination {
    padding: 10px;
  }
  
  .custom-pagination :deep(.el-pagination__sizes),
  .custom-pagination :deep(.el-pagination__jump) {
    display: none;
  }
}
</style>